<template>
  <Form :model="formData">

    <FormItem label="菜单名称" label-position="top">
      <Input v-model="formData.name" placeholder="请输入菜单的名称"/>
    </FormItem>

    <FormItem label="图标" label-position="top">
      <Select v-model="formData.icon" placeholder="请选择菜单图标" @on-change="icon=$event">
        <template #prefix>
          <Icon :type="icon" size="20"/>
        </template>
        <Option v-for="item in iconList" :key="item" :value="item">
          <Icon :type="item" size="20"/>
          {{ item }}
        </Option>
      </Select>
    </FormItem>

    <FormItem label="排序" label-position="top">
      <InputNumber v-model="formData.sorted" placeholder=""/>
      <b style="padding: 0 5px">请输入排序的数字,数字越大,优先级越低</b>
    </FormItem>

    <FormItem label="描述信息" label-position="top">
      <Input v-model="formData.description" type="textarea" :rows="4" placeholder="请输入菜单的描述信息"/>
    </FormItem>

    <FormItem label="状态" label-position="top">
      <Switch size="large" v-model="formData.status">
        <template #open>
          <span>启用</span>
        </template>
        <template #close>
          <span>禁用</span>
        </template>
      </Switch>
    </FormItem>
  </Form>
  <div class="demo-drawer-footer">
    <Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
    <Button type="primary" @click="saveOrModifyMenu">保存</Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icon: "ios-image",
      formData: this.menuRow ?? {id: null, name: '', icon: '', status: true, sorted: -1, description: ''},
      iconList: ["md-analytics", "ios-construct", "ios-apps", "ios-browsers", "md-briefcase", "ios-bug",
        "ios-bulb", "md-chatboxes", "logo-chrome", "ios-color-filter", "md-cube", "md-flag",
        "md-game-controller-b", "ios-globe", "ios-heart", "md-home", "ios-leaf", "md-medal",
        "md-megaphone", "md-notifications", "ios-people", "ios-pie", "md-pricetags", "ios-ribbon"
      ]
    }
  },
  props: {
    menuRow: {
      type: Object,
      required: false,
    }
  },
  emits: ["close-win"],
  methods: {
    checkForm() {
      if (this.formData.name === "") {
        this.$Message.error({background: true, content: '菜单名为空'});
        return false;
      }

      if (this.formData.icon === "") {
        this.$Message.error({background: true, content: '菜单图标为空'});
        return false;
      }
      return true;
    },
    saveOrModifyMenu() {
      let check = this.checkForm();

      if (check && this.formData.id == null) {
        // 保存数据
        this.$api.addMenu(this.formData).then(ret => {
          // 获取接口返回的数据
          if (ret.data.status === "10000") {
            this.$Message.success({background: true, content: "数据添加成功"});
            // 关闭菜单，并刷新数据
            this.$emit('close-win', true) ;
          } else {
            this.$Message.error({background: true, content: ret.data.message});
          }
        })
      }else if (check) {
        this.$api.modifyMenu(this.formData).then(ret => {
          // 获取接口返回的数据
          if (ret.data.status === "10000") {
            this.$Message.success({background: true, content: "数据修改成功"});
            this.$emit('close-win', true) ;
          } else {
            this.$Message.error({background: true, content: ret.data.message});
          }
        })
      }
    }
  }
}
</script>

<style>
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>